<template>
	<div class="g-nested-loading">
		<div v-if="spinning" class="g-loading-mask" :class="spinContentClass" :style="spinning ? spinContentStyle : {}">
			<div class="g-loading">
				<div v-if="type === 'dna'" class="dna-loading">
					<div v-for="i in 60" :key="i" class="dna-ele">
						<div class="dna-dot" />
					</div>
				</div>
				<div v-else-if="type === 'square'" class="square-loading">
					<i class="loading-icon validating" />
					<i class="loading-icon validating" />
					<i class="loading-icon validating" />
				</div>
				<div v-else>
					{{ type }}
				</div>
			</div>
		</div>
		<slot />
	</div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from "vue";

export default defineComponent({
	name: "GLoading",
	props: {
		type: {
			type: String as PropType<"dna" | "square">,
			default: "dna"
		},
		spinning: {
			type: Boolean,
			default: false
		},
		theme: {
			type: String as PropType<"dark" | "light">,
			default: "light"
		},
		opacity: {
			type: Number,
			default: 1
		},
		wrapClass: {
			type: String
		},
		wrapStyle: {
			type: {} as PropType<Record<string, any>>
		}
	},
	setup(props) {
		// const opacity = props.opacity > 1 ? 1 : props.opacity < 0 ? 0 : props.opacity;

		const spinContentClass = ref("");
		if (props.spinning) {
			if (props.wrapClass) {
				spinContentClass.value += ` ${props.wrapClass}`;
			}
		} else {
			spinContentClass.value = "";
		}

		const wrapStyle: Record<string, any> = props.wrapStyle || {};
		const spinContentStyle = ref({
			...wrapStyle,
			background: "transparent"
		});

		return {
			spinContentClass,
			spinContentStyle
		};
	}
});
</script>
<style lang="scss" scoped>
@import "loading";
</style>
